<%@ include file="/taglibs.jsp"%>
<html>
<head>
    <title><fmt:message key="fileForm.detail.title"/></title>
	<link rel="stylesheet" type="text/css" href="${ctx}/styles/styles_tab.css" />
	<style type="text/css">
		/* Containers
		----------------------------------------------------------------------------------------------------*/
		.container_2 {
			margin-left: auto;
			margin-right: auto;
			width: 100%;
		}
		
		/* Grid >> Global
		----------------------------------------------------------------------------------------------------*/
		
		.grid_1,
		.grid_2 {
			display:inline;
			float: left;
			position: relative;
			margin-left: 1px;
			margin-right: 0px;
		}
		
		
		/* Grid >> 2 Columns
		----------------------------------------------------------------------------------------------------*/
		.container_2 .grid_1 {
			width:510px;
		}
		.container_2 .grid_2 {
			width:200px;
		}
		
		/* `Clear Floated Elements
		----------------------------------------------------------------------------------------------------*/
		
		/* http://sonspring.com/journal/clearing-floats */
		
		.clear {
		  clear: both;
		  display: block;
		  overflow: hidden;
		  visibility: hidden;
		  width: 0;
		  height: 0;
		}
		
		/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
		
		.clearfix:before,
		.clearfix:after {
		  content: '\0020';
		  display: block;
		  overflow: hidden;
		  visibility: hidden;
		  width: 0;
		  height: 0;
		}
		
		.clearfix:after {
		  clear: both;
		}
	</style>
</head>
<s:set var="fileStatus" value="file.fileStatus"></s:set>
<s:set var="voucher" value="fileProcessVoucher"></s:set>
<s:set var="depts" value="departments"></s:set>
<s:set var="maxStep" value="maxPosition"></s:set>
<s:set var="currStep" value="currentStep"></s:set>
<%--
<s:set var="fileMgrs" value="fileManagements"></s:set>
 --%>
<body>
		<div>
		    <ul class="tabs">
		        <li><a href="#tab1"><s:property value="getText('file.info')"/></a></li>
		        <li><a href="#tab2"><s:property value="getText('file.progress')"/></a></li>
		        <li><a href="#tab3"><s:property value="getText('file.exchange.info')"/></a></li>
		        <s:if test="ableToNextStep">
		        	<li>
		        		<s:if test="%{#currStep < #maxStep}">
		        			<a href="#tab4">
		        				<s:text name="fileTransfer.next"/>
		        			</a>
		        		</s:if>
		        		<s:if test="%{#currStep == #maxStep}">
		        			<a href="#tab5">
		        				<s:text name="fileTransfer.next"/>
		        			</a>
		        		</s:if>	
		        	</li>
				</s:if>
		    </ul>
		    <div class="tab_container">
		        <div id="tab1" class="tab_content">
					<jsp:include page="fileViewTab1.jsp"/>			
        		</div>
		        <div id="tab2"  class="tab_content">
					<jsp:include page="fileViewTab2.jsp"/>
		        </div>        
		        <div id="tab3"  class="tab_content"> 
				    <jsp:include page="fileViewTab3.jsp"/>
		        </div>
		        <s:if test="ableToNextStep">
		        	<s:if test="%{#currStep < #maxStep}">
				        <div id="tab4"  class="tab_content"> 
							 <jsp:include page="fileViewTab4.jsp"/>
				        </div>
			        </s:if>
			        <s:if test="%{#currStep == #maxStep}">
				        <div id="tab5"  class="tab_content"> 
							<jsp:include page="fileViewTab5.jsp"/>
				        </div>
			        </s:if>
		        </s:if>
    		</div>
	</div>
	<script type="text/javascript">
	
	$('#transfer').click(function(){
		$.blockUI({ message: '<img src="${ctx}/images/busy.gif" />...' });
		$.ajax({
		  type: 'POST',
		  url: $('#transferFileForm').attr('action') + '?struts.enableJSONValidation=true&struts.validateOnly=true',
		  data: $('#transferFileForm').serialize(),
		  success: function(data){
			 $('div.message').hide();
			 var errorsObject = $.StrutsUtils.getValidationErrors(data);
			 if(errorsObject.fieldErrors) {
		       	//StrutsUtils.showValidationErrors(form, errorsObject);
				 $.StrutsUtils.showValidationErrors($('form'), errorsObject);
		     } else if(errorsObject.errors) {
		       	//StrutsUtils.showValidationErrors(form, errorsObject);
				 $.StrutsUtils.showValidationErrors($('form'), errorsObject);
		     } else {
		       //good to go, regular submit
		       $('#transferFileForm').submit();
		     }
		  },
		  dataType: "text/html"
		});
	}); 

	$('#transferLastStep').click(function(){
		$.blockUI({ message: '<img src="${ctx}/images/busy.gif" />...' });
		$.ajax({
		  type: 'POST',
		  url: $('#transferFileLastStepForm').attr('action') + '?struts.enableJSONValidation=true&struts.validateOnly=true',
		  data: $('#transferFileLastStepForm').serialize(),
		  success: function(data){
			 $('div.message').hide();
			 var errorsObject = $.StrutsUtils.getValidationErrors(data);
			 if(errorsObject.fieldErrors) {
		       	//StrutsUtils.showValidationErrors(form, errorsObject);
				 $.StrutsUtils.showValidationErrors($('form'), errorsObject);
		     } else if(errorsObject.errors) {
		       	//StrutsUtils.showValidationErrors(form, errorsObject);
				 $.StrutsUtils.showValidationErrors($('form'), errorsObject);
		     } else {
		       //good to go, regular submit
		       $('#transferFileLastStepForm').submit();
		     }
		  },
		  dataType: "text/html"
		});
	});  
 
	$('#exchange').click(function(){
		$.blockUI({ message: '<img src="${ctx}/images/busy.gif" />...' });
		$.ajax({
		  type: 'POST',
		  url: $('#exchangeForm').attr('action') + '?struts.enableJSONValidation=true&struts.validateOnly=true',
		  data: $('#exchangeForm').serialize(),
		  success: function(data){
			 $('div.message').hide();
			 var errorsObject = $.StrutsUtils.getValidationErrors(data);
			 if(errorsObject.fieldErrors) {
		       	//StrutsUtils.showValidationErrors(form, errorsObject);
				 $.StrutsUtils.showValidationErrors($('form'), errorsObject);
		     } else if(errorsObject.errors) {
		       	//StrutsUtils.showValidationErrors(form, errorsObject);
				 $.StrutsUtils.showValidationErrors($('form'), errorsObject);
		     } else {
		       //good to go, regular submit
		       $('#exchangeForm').submit();
		     }
		  },
		  dataType: "text/html"
		});
	});
	
	$('select[name="groupIdToExchange"]').change(function(){
		if ($(this).val() != "0") {
			$.blockUI({ message: ajaxAnimation }); 
			$.ajax({
			  url: 'searchUserByGroup.html',
			  data : {'groupId' : $(this).val()},
			  dataType : 'json',
			  success: function(data) {
				  	var userHTML = "";
					$.each(data.listUser, function() {
						userHTML += '<option value="' + this.value + '">' + this.name + '</option>';
					});			 
					$('select[name="userExchanges"]').html($('select[name="userExchanges"] :first').clone().wrap('<div>').parent().html() + userHTML);										
			  }
			});
		}
	});
	
	$('select[name="groupIdToTransfer"]').change(function(){
		if ($(this).val() != "0") {
			$.blockUI({ message: ajaxAnimation }); 
			$.ajax({
			  url: 'searchUserByGroup.html',
			  data : {'groupId' : $(this).val()},
			  dataType : 'json',
			  success: function(data) {
				  	var userHTML = "";
					$.each(data.listUser, function() {
						userHTML += '<option value="' + this.value + '">' + this.name + '</option>';
					});			 
					$('select[name="userTransfers"]').html($('select[name="userTransfers"] :first').clone().wrap('<div>').parent().html() + userHTML);										
			  }
			});
		}
	});
	
	$(document).ready(function() {
	
		//Default Action
		$(".tab_content").hide(); //Hide all content
		$("ul.tabs li:first").addClass("active").show(); //Activate first tab
		$(".tab_content:first").show(); //Show first tab content
		
		//On Click Event
		$("ul.tabs li").click(function() {
			$("ul.tabs li").removeClass("active"); //Remove any "active" class
			$(this).addClass("active"); //Add "active" class to selected tab
			$(".tab_content").hide(); //Hide all tab content
			var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
			$(activeTab).fadeIn(); //Fade in the active content
			return false;
		});
	
	});
	</script>
</body>
</html>







